<template>
  <div class="warehouse-modeling-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="warehouse-list-card">
          <template #header>
            <div class="card-header">
              <h3>仓库列表</h3>
              <el-button type="primary" @click="createWarehouse">新建仓库</el-button>
            </div>
          </template>
          
          <el-input v-model="searchQuery" placeholder="搜索仓库" prefix-icon="Search" clearable class="search-input" />
          
          <el-scrollbar height="calc(100vh - 280px)">
            <div class="warehouse-list">
              <div
                v-for="warehouse in filteredWarehouses"
                :key="warehouse.id"
                class="warehouse-item"
                :class="{ 'active': selectedWarehouse && selectedWarehouse.id === warehouse.id }"
                @click="selectWarehouse(warehouse)"
              >
                <div class="warehouse-icon">
                  <el-icon><House /></el-icon>
                </div>
                <div class="warehouse-info">
                  <div class="warehouse-name">{{ warehouse.name }}</div>
                  <div class="warehouse-address">{{ warehouse.location }}</div>
                </div>
                <div class="warehouse-status">
                  <el-tag :type="warehouse.status === 'active' ? 'success' : 'info'" size="small">
                    {{ warehouse.status === 'active' ? '使用中' : '未启用' }}
                  </el-tag>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </el-card>
      </el-col>
      
      <el-col :span="18">
        <el-card class="model-display-card" v-loading="loading3D">
          <template #header>
            <div class="card-header">
              <h3>仓库三维模型</h3>
              <div class="model-actions" v-if="selectedWarehouse">
                <el-button-group>
                  <el-button type="primary" @click="rotateModel">旋转</el-button>
                  <el-button type="primary" @click="zoomIn">放大</el-button>
                  <el-button type="primary" @click="zoomOut">缩小</el-button>
                  <el-button type="primary" @click="resetView">重置视图</el-button>
                </el-button-group>
                <el-button type="success" @click="editWarehouse" style="margin-left: 10px">编辑仓库</el-button>
              </div>
            </div>
          </template>
          
          <div v-if="selectedWarehouse" class="model-container" ref="modelContainer">
            <!-- 这里将渲染3D模型，使用Three.js或其他3D库 -->
            <div class="model-placeholder">
              <div class="model-info">
                <h2>{{ selectedWarehouse.name }} - 3D模型视图</h2>
                <p>仓库编号: {{ selectedWarehouse.id }}</p>
                <p>位置: {{ selectedWarehouse.location }}</p>
                <p>面积: {{ selectedWarehouse.area }} 平方米</p>
                <p>货架数量: {{ selectedWarehouse.shelfCount }} 个</p>
                <p>货位数量: {{ selectedWarehouse.locationCount }} 个</p>
              </div>
              <div class="model-visualization">
                <!-- 简单的3D仓库示意图 -->
                <div class="warehouse-3d-model">
                  <div class="warehouse-floor"></div>
                  <div class="warehouse-wall wall-back"></div>
                  <div class="warehouse-wall wall-left"></div>
                  <div class="warehouse-wall wall-right"></div>
                  <div class="warehouse-shelf shelf-1"></div>
                  <div class="warehouse-shelf shelf-2"></div>
                  <div class="warehouse-shelf shelf-3"></div>
                  <div class="warehouse-shelf shelf-4"></div>
                </div>
              </div>
            </div>
          </div>
          
          <div v-else class="no-warehouse-selected">
            <el-empty description="请选择一个仓库进行查看" />
          </div>
        </el-card>
        
        <el-card class="warehouse-stats-card" v-if="selectedWarehouse">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-title">总货位数</div>
                <div class="stat-value">{{ selectedWarehouse.locationCount }}</div>
                <div class="stat-footer">货位利用率: {{ selectedWarehouse.utilizationRate }}%</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-title">已占用货位</div>
                <div class="stat-value">{{ Math.round(selectedWarehouse.locationCount * selectedWarehouse.utilizationRate / 100) }}</div>
                <div class="stat-footer">占比: {{ selectedWarehouse.utilizationRate }}%</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-title">空闲货位</div>
                <div class="stat-value">{{ selectedWarehouse.locationCount - Math.round(selectedWarehouse.locationCount * selectedWarehouse.utilizationRate / 100) }}</div>
                <div class="stat-footer">占比: {{ 100 - selectedWarehouse.utilizationRate }}%</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-title">库存物料种类</div>
                <div class="stat-value">{{ selectedWarehouse.materialTypes }}</div>
                <div class="stat-footer">总数量: {{ selectedWarehouse.totalItems }} 件</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 新建/编辑仓库对话框 -->
    <el-dialog
      v-model="warehouseDialogVisible"
      :title="dialogMode === 'create' ? '新建仓库' : '编辑仓库'"
      width="60%"
      destroy-on-close
    >
      <el-form :model="warehouseForm" label-width="120px" ref="warehouseFormRef">
        <el-form-item label="仓库名称" prop="name">
          <el-input v-model="warehouseForm.name" placeholder="请输入仓库名称" />
        </el-form-item>
        
        <el-form-item label="仓库位置" prop="location">
          <el-input v-model="warehouseForm.location" placeholder="请输入仓库位置" />
        </el-form-item>
        
        <el-form-item label="仓库面积(㎡)" prop="area">
          <el-input-number v-model="warehouseForm.area" :min="1" :step="10" />
        </el-form-item>
        
        <el-form-item label="仓库状态" prop="status">
          <el-select v-model="warehouseForm.status">
            <el-option label="使用中" value="active" />
            <el-option label="未启用" value="inactive" />
          </el-select>
        </el-form-item>
        
        <el-divider content-position="left">仓库布局配置</el-divider>
        
        <el-form-item label="货架数量" prop="shelfCount">
          <el-input-number v-model="warehouseForm.shelfCount" :min="1" :step="1" />
        </el-form-item>
        
        <el-form-item label="每货架层数" prop="shelfLevels">
          <el-input-number v-model="warehouseForm.shelfLevels" :min="1" :max="10" :step="1" />
        </el-form-item>
        
        <el-form-item label="每层货位数" prop="locationsPerLevel">
          <el-input-number v-model="warehouseForm.locationsPerLevel" :min="1" :max="50" :step="1" />
        </el-form-item>
        
        <el-form-item label="仓库布局" prop="layout">
          <el-radio-group v-model="warehouseForm.layout">
            <el-radio value="linear" label="线性布局"></el-radio>
            <el-radio value="uShape" label="U型布局"></el-radio>
            <el-radio value="grid" label="网格布局"></el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="备注" prop="notes">
          <el-input v-model="warehouseForm.notes" type="textarea" rows="3" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="warehouseDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveWarehouse">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { House, Search } from '@element-plus/icons-vue'

export default {
  name: 'WarehouseModeling',
  components: {
    House,
    Search
  },
  setup() {
    // 状态
    const loading3D = ref(false)
    const searchQuery = ref('')
    const selectedWarehouse = ref(null)
    const warehouseDialogVisible = ref(false)
    const dialogMode = ref('create')
    const warehouseFormRef = ref(null)
    const modelContainer = ref(null)
    
    // 仓库表单
    const warehouseForm = reactive({
      id: '',
      name: '',
      location: '',
      area: 1000,
      status: 'active',
      shelfCount: 10,
      shelfLevels: 5,
      locationsPerLevel: 10,
      layout: 'linear',
      notes: ''
    })
    
    // 模拟仓库数据
    const warehouses = ref([
      {
        id: 'WH001',
        name: '中央仓库',
        location: '上海市浦东新区物流园区A12号',
        area: 5000,
        status: 'active',
        shelfCount: 100,
        locationCount: 2000,
        utilizationRate: 75,
        materialTypes: 120,
        totalItems: 15000
      },
      {
        id: 'WH002',
        name: '北区配送中心',
        location: '北京市顺义区空港物流基地C3区',
        area: 3500,
        status: 'active',
        shelfCount: 80,
        locationCount: 1600,
        utilizationRate: 60,
        materialTypes: 95,
        totalItems: 9800
      },
      {
        id: 'WH003',
        name: '南方仓储中心',
        location: '广州市黄埔区科学城物流园B5栋',
        area: 4200,
        status: 'active',
        shelfCount: 90,
        locationCount: 1800,
        utilizationRate: 82,
        materialTypes: 110,
        totalItems: 12500
      },
      {
        id: 'WH004',
        name: '西部物流中心',
        location: '成都市青白江区物流园区D2号',
        area: 3800,
        status: 'inactive',
        shelfCount: 70,
        locationCount: 1400,
        utilizationRate: 0,
        materialTypes: 0,
        totalItems: 0
      }
    ])
    
    // 过滤后的仓库列表
    const filteredWarehouses = computed(() => {
      if (!searchQuery.value) return warehouses.value
      
      const query = searchQuery.value.toLowerCase()
      return warehouses.value.filter(warehouse => 
        warehouse.name.toLowerCase().includes(query) || 
        warehouse.location.toLowerCase().includes(query) ||
        warehouse.id.toLowerCase().includes(query)
      )
    })
    
    // 选择仓库
    const selectWarehouse = (warehouse) => {
      loading3D.value = true
      selectedWarehouse.value = warehouse
      
      // 模拟加载3D模型
      setTimeout(() => {
        loading3D.value = false
      }, 1000)
    }
    
    // 新建仓库
    const createWarehouse = () => {
      dialogMode.value = 'create'
      Object.assign(warehouseForm, {
        id: '',
        name: '',
        location: '',
        area: 1000,
        status: 'active',
        shelfCount: 10,
        shelfLevels: 5,
        locationsPerLevel: 10,
        layout: 'linear',
        notes: ''
      })
      warehouseDialogVisible.value = true
    }
    
    // 编辑仓库
    const editWarehouse = () => {
      if (!selectedWarehouse.value) return
      
      dialogMode.value = 'edit'
      Object.assign(warehouseForm, {
        id: selectedWarehouse.value.id,
        name: selectedWarehouse.value.name,
        location: selectedWarehouse.value.location,
        area: selectedWarehouse.value.area,
        status: selectedWarehouse.value.status,
        shelfCount: selectedWarehouse.value.shelfCount,
        shelfLevels: 5,
        locationsPerLevel: Math.round(selectedWarehouse.value.locationCount / (selectedWarehouse.value.shelfCount * 5)),
        layout: 'linear',
        notes: ''
      })
      warehouseDialogVisible.value = true
    }
    
    // 保存仓库
    const saveWarehouse = () => {
      // 计算总货位数
      const locationCount = warehouseForm.shelfCount * warehouseForm.shelfLevels * warehouseForm.locationsPerLevel
      
      if (dialogMode.value === 'create') {
        // 生成新ID
        const newId = 'WH' + (warehouses.value.length + 1).toString().padStart(3, '0')
        
        // 添加新仓库
        warehouses.value.push({
          id: newId,
          name: warehouseForm.name,
          location: warehouseForm.location,
          area: warehouseForm.area,
          status: warehouseForm.status,
          shelfCount: warehouseForm.shelfCount,
          locationCount: locationCount,
          utilizationRate: warehouseForm.status === 'active' ? 0 : 0,
          materialTypes: 0,
          totalItems: 0
        })
        
        ElMessage.success('仓库创建成功')
      } else {
        // 更新现有仓库
        const index = warehouses.value.findIndex(w => w.id === warehouseForm.id)
        if (index !== -1) {
          const updatedWarehouse = {
            ...warehouses.value[index],
            name: warehouseForm.name,
            location: warehouseForm.location,
            area: warehouseForm.area,
            status: warehouseForm.status,
            shelfCount: warehouseForm.shelfCount,
            locationCount: locationCount
          }
          
          warehouses.value[index] = updatedWarehouse
          
          // 如果当前选中的是被编辑的仓库，更新选中的仓库
          if (selectedWarehouse.value && selectedWarehouse.value.id === updatedWarehouse.id) {
            selectedWarehouse.value = updatedWarehouse
          }
          
          ElMessage.success('仓库更新成功')
        }
      }
      
      warehouseDialogVisible.value = false
    }
    
    // 3D模型控制函数
    const rotateModel = () => {
      ElMessage.info('旋转模型功能已触发')
      // 实际项目中这里会调用3D库的旋转功能
    }
    
    const zoomIn = () => {
      ElMessage.info('放大模型功能已触发')
      // 实际项目中这里会调用3D库的放大功能
    }
    
    const zoomOut = () => {
      ElMessage.info('缩小模型功能已触发')
      // 实际项目中这里会调用3D库的缩小功能
    }
    
    const resetView = () => {
      ElMessage.info('重置视图功能已触发')
      // 实际项目中这里会调用3D库的视图重置功能
    }
    
    // 初始化
    onMounted(() => {
      // 默认选中第一个仓库
      if (warehouses.value.length > 0) {
        selectWarehouse(warehouses.value[0])
      }
      
      // 实际项目中这里会初始化3D库
    })
    
    return {
      loading3D,
      searchQuery,
      warehouses,
      filteredWarehouses,
      selectedWarehouse,
      warehouseDialogVisible,
      dialogMode,
      warehouseForm,
      warehouseFormRef,
      modelContainer,
      
      selectWarehouse,
      createWarehouse,
      editWarehouse,
      saveWarehouse,
      rotateModel,
      zoomIn,
      zoomOut,
      resetView
    }
  }
}
</script>

<style>
.warehouse-modeling-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.warehouse-list-card {
  height: calc(100vh - 140px);
}

.search-input {
  margin-bottom: 15px;
}

.warehouse-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.warehouse-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.warehouse-item:hover {
  background-color: #f5f7fa;
}

.warehouse-item.active {
  background-color: #ecf5ff;
  border-left: 3px solid #409EFF;
}

.warehouse-icon {
  font-size: 24px;
  color: #409EFF;
  margin-right: 12px;
}

.warehouse-info {
  flex: 1;
}

.warehouse-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.warehouse-address {
  font-size: 12px;
  color: #909399;
}

.model-display-card {
  height: calc(100vh - 280px);
  margin-bottom: 20px;
}

.model-container {
  height: 100%;
  min-height: 400px;
}

.model-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.model-info {
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 15px;
}

.model-info h2 {
  margin-top: 0;
  margin-bottom: 10px;
}

.model-info p {
  margin: 5px 0;
}

.model-visualization {
  flex: 1;
  position: relative;
  background-color: #f0f2f5;
  border-radius: 4px;
  overflow: hidden;
}

.no-warehouse-selected {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.warehouse-stats-card {
  margin-top: 20px;
}

.stat-card {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 15px;
  text-align: center;
}

.stat-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.stat-footer {
  font-size: 12px;
  color: #909399;
}

/* 简单的3D仓库CSS模型 */
.warehouse-3d-model {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.warehouse-floor {
  position: absolute;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  background-color: #ddd;
  transform: rotateX(60deg);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.warehouse-wall {
  position: absolute;
  background-color: #eee;
}

.wall-back {
  width: 80%;
  height: 40%;
  left: 10%;
  top: 10%;
  transform: rotateX(30deg) translateZ(-100px);
}

.wall-left {
  width: 80%;
  height: 40%;
  left: 10%;
  top: 10%;
  transform: rotateX(30deg) rotateY(90deg) translateZ(-100px);
}

.wall-right {
  width: 80%;
  height: 40%;
  right: 10%;
  top: 10%;
  transform: rotateX(30deg) rotateY(-90deg) translateZ(-100px);
}

.warehouse-shelf {
  position: absolute;
  width: 10%;
  height: 20%;
  background-color: #999;
  transform: rotateX(60deg);
}

.shelf-1 {
  left: 20%;
  top: 30%;
}

.shelf-2 {
  left: 40%;
  top: 30%;
}

.shelf-3 {
  left: 60%;
  top: 30%;
}

.shelf-4 {
  left: 40%;
  top: 60%;
}

/* 确保下拉框宽度为180px */
.el-select {
  width: 180px !important;
}

/* 特殊情况下需要100%宽度的select */
.full-width-select .el-select {
  width: 100% !important;
}
</style> 